<template>
  <div>
    <el-form ref="searchForm" :inline="true" :model="searchMap" class="item">
      <el-form-item class="items1" prop="sid">
        <el-input v-model="searchMap.sid" placeholder="供应商编号"></el-input>
      </el-form-item>
      <el-form-item class="items2" prop="sname">
        <el-input v-model="searchMap.sname" placeholder="联系人"></el-input>
      </el-form-item>
      <el-form-item class="items3" prop="sphone">
        <el-input v-model="searchMap.sphone" placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item class="items4" prop="smaterial">
        <el-input v-model="searchMap.smaterial" placeholder="原材料"></el-input>
      </el-form-item>
      <el-form-item class="items5" prop="saddress">
        <el-input
          v-model="searchMap.saddress"
          placeholder="供应商地址"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <button type="primary" @click="fetchData" class="buttons1">查询</button>
        <button @click="resetForm('searchForm')" class="buttons2">重置</button>
        <button @click="dialogFormVisible = true" class="buttons3">新增</button>
      </el-form-item>
    </el-form>

    <el-table :data="list" style="width: 100%; font-size: 2px">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item>
              <span>供应商编号：</span>
              <span>{{ props.row.sid }}</span>
            </el-form-item>
            <el-form-item>
              <span>联系人：</span>
              <span>{{ props.row.sname }}</span>
            </el-form-item>
            <el-form-item>
              <span>联系电话：</span>
              <span>{{ props.row.sphone }}</span>
            </el-form-item>
            <el-form-item>
              <span>原材料：</span>
              <span>{{ props.row.smaterial }}</span>
            </el-form-item>
            <el-form-item>
              <span>单价：</span>
              <span>{{ props.row.sprice }}元/kg</span>
            </el-form-item>
            <el-form-item>
              <span>供应商地址：</span>
              <span>{{ props.row.saddress }}</span>
            </el-form-item>
            <el-form-item>
              <span>合同终止日期：</span>
              <span>{{ props.row.sendtime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index"> </el-table-column>
      <el-table-column label="供应商编号" prop="sid"> </el-table-column>
      <el-table-column label="材料名称" prop="smaterial"> </el-table-column>
      <el-table-column label="供应商地址" prop="saddress"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.sid)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.sid,scope.row.smaterial)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增供应商" width="460px;" :visible.sync="dialogFormVisible">
      <el-form
        ref="pojo"
        :rules="rules"
        label-width="110px"
        label-position="right"
        style="width: 400px"
        :model="pojo"
      >
        <el-form-item label="联系人姓名" prop="sname" style="height: 36px">
          <el-input v-model="pojo.sname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="sphone" style="height: 36px">
          <el-input v-model="pojo.sphone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="原材料名" prop="smaterial" style="height: 36px">
          <el-input v-model="pojo.smaterial" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单价(元)" prop="sprice" style="height: 36px">
          <el-input v-model="pojo.sprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商地址" prop="saddress" style="height: 36px">
          <el-input v-model="pojo.saddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="合同终止日期" prop="sendtime" style="height: 10px">
          <el-date-picker
            v-model="pojo.sendtime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOneSupplier('pojo')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="编辑供应商信息" width="460px;" :visible.sync="dialogFormVisible2">
      <el-form
        ref="pojoEdit"
        :rules="rules"
        label-width="110px"
        label-position="right"
        style="width: 400px"
        :model="pojoEdit"
      >
        <el-form-item label="联系人姓名" prop="sname" style="height: 36px">
          <el-input v-model="pojoEdit.sname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="sphone" style="height: 36px">
          <el-input v-model="pojoEdit.sphone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商地址" prop="saddress" style="height: 36px">
          <el-input v-model="pojoEdit.saddress" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOneSupplier('pojoEdit')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import supplierApi from "@/api/supplier";
export default {
  data() {
    return {
      list: [],
      searchMap: {
        sid: "",
        sname: "",
        sphone: "",
        smaterial: "",
        saddress: "",
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      pojo: {
        sphone: '',
        sname: '',
        smaterial: '',
        sprice: '',
        saddress: '',
        sendtime: ''
      },
      pojoEdit: {
        sid: '',
        sphone: '',
        sname: '',
        saddress: '',
      },
      rules: {
        sphone: [{ required: true, message: "联系方式不能为空", trigger: "blur" }],
        sname: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        smaterial: [{ required: true, message: "材料名不能为空", trigger: "blur" }],
        sprice: [{ required: true, message: "单价不能为空", trigger: "blur" }],
        saddress: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        sendtime: [{ required: true, message: "终止时间不能为空", trigger: "blur" }]
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      supplierApi.search(this.searchMap).then((response) => {
        this.list = response.data;
      });
    },
    handleEdit(sid) {
      supplierApi.getOneSupplier(sid).then((response) => {
        this.pojoEdit.sid = response.data[0].sid;
        this.pojoEdit.sname = response.data[0].sname;
        this.pojoEdit.saddress = response.data[0].saddress;
        this.pojoEdit.sphone = response.data[0].sphone;
        
      })
      this.dialogFormVisible2 = true;
    },
    saveOneSupplier(fromName){
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          supplierApi.editOneSupplier(this.pojoEdit).then((response) => {
            this.fetchData();
            this.dialogFormVisible2 = false;
          });
        } else {
        }
      });
    },
    handleDelete(sid, smaterial) {
      this.$confirm("此操作将永久删除" + smaterial + "供应商, 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          supplierApi.deleteOneSupplier(sid).then((response) => {
            if (response.data == 1) {
              this.fetchData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm(fromName) {
      this.$refs[fromName].resetFields();
      this.fetchData();
    },
    addOneSupplier(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          supplierApi.addOneSupplier(this.pojo).then((response) => {
            console.log(response.data);
            this.fetchData();
            this.dialogFormVisible = false
          });
        } else {

        }
      });
    },
  },
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
span {
  font-family: "华文隶书";
}
.item {
  height: 46px;
}
.items1 {
  width: 142px;
}
.items2 {
  width: 90px;
}
.items3 {
  width: 116px;
}
.items4 {
  width: 78px;
}
.items5 {
  width: 102px;
}
.buttons1 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  background: #409eff;
  border-radius: 4px;
  border: white;
}
.buttons2 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  border-radius: 4px;
  background: #a5ada6;
  border: white;
}
.buttons3 {
  width: 50px;
  height: 30px;
  margin-right: 0px;
  background: #40ff60;
  border-radius: 4px;
  border: white;
}
</style>